<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./element/index.css" />
		<script src="./js/vue.js"></script>
		<script src="./element/index.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}
			/* 大盒子 */
			#addtableone {
			
				width: 90%;
		/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
			}
			#header{
				top:0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}
			#header #left{
				height: 80px;
				line-height: 80px;
				text-indent: 12px;
		
			}
			#header #right{
				height: 80px;
				
				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}
			#hr1{
				
				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;
				
			}
		</style>
	</head>
	<body>
		<div id="addtableone">
			<!-- 			<el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark">
			  <div class="block">
			    <span class="demonstration"> 登记表类型</span>
			    <el-cascader
			      v-model="value"
			      :options="options"
			      @change="handleChange"></el-cascader>
			  </div>
			  </div></el-col>
			</el-row> -->
			
			<el-row id="header">
			  <el-col :span="12"><div class="grid-content bg-purple" id="left">
			  <h3>用户管理 \ 添加页面</h3>
			  </div></el-col>
			  <el-col :span="12"><div class="grid-content bg-purple-light" id="right">
			  <el-button type="primary"><el-link style="width: 100%;"  href="list.html" target="_self" :underline="false">返回</el-link> </el-button>
			  </div></el-col>
			</el-row>
			<hr id="hr1"/>
			<el-row>
		
	
						<!-- 表单子属性有el-form-item,el-row(多个el-form-item)同级别,可自行删除不需要的-->
						<!-- 短框200px,长框300px,el-form-item width -->
						<!-- 选择框或输入框 label用于显示, value 与 VUE中对应属性绑定 -->
						<!--正则 el-form-item prop="值"  值和rules 中的规则对象绑定-->
						<!--最后的验证函数已经注释可正常提交 ,若想使用查看提交按钮处注释, -->
					    <!-- 	刊物级别,和论文类型 使用v-for,其他的是固定的 -->
						<!-- 出版时间和现在时间已经写好可直接使用,onsubmit函数中 -->
						<!--证明材料未设置必须提交,也未绑定table中的值 掌握文件上传后才自行设置-->
						<!--提交后表单信息归零函数未设置,后期自行设置-->
						<el-form  :model="form"  :rules="rules"  ref="form" label-width="80px" class="demo-ruleForm" name >

							<el-form-item label="登记类型" style="width: 300px;" prop="region">

								<el-select v-model="form.region" placeholder="请选择添加表类型">
									<el-option label="发表论文登记表" value="1"></el-option>
									<el-option label="获奖情况登记表" value="2"></el-option>
									<el-option label="教材与专著登记表" value="3"></el-option>
									<el-option label="科研项目登记表" value="4"></el-option>
									<el-option label="指导竞赛" value="5"></el-option>
									<el-option label="教改项目登记表" value="6"></el-option>
									<el-option label="专利及软件著作权" value="7"></el-option>
									<el-option label="xxx登记表" value="8"></el-option>
								</el-select>
							</el-form-item>
							

							<el-form-item label="填报人" style="width: 200px" prop="name" >
								<el-input v-model="form.name"></el-input>
							</el-form-item>


							<el-row>
								<el-col :span="8" >
									<el-form-item label="刊物名称" style="width: 300px;" prop="kanwu"  >
										<el-input v-model="form.kanwu"></el-input>
									</el-form-item>
								</el-col>
								
								<el-col :span="8" >
								<el-form-item label="刊物级别" style="width: 300px;" prop="jibie"  >
								<el-select v-model="form.jibie"  placeholder="请选择刊物级别" prop="jibie">
									<el-option v-for="(item,index) in jibie"  :key="index" :label="item" ></el-option>
						<!-- 			<el-option label="" value="2"></el-option>
									<el-option label="教材与专著登记表" value="3"></el-option> -->
						
								</el-select>
								</el-form-item>
								</el-col>
								<el-col :span="8" >
									<el-form-item label="得分" style="width: 200px" prop="score" >
										<el-input v-model.number="form.score"></el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="8" >
									<el-form-item label="出版日期" style="width: 300px"  prop="chubandate" >
										<el-date-picker type="date" placeholder="选择日期" v-model="form.chubandate" value-format="yyyy-MM-dd"
											style="width: 100%;"></el-date-picker>

									</el-form-item>
							    </el-col>
								<el-col :span="8">
									<el-form-item label="总人数" style="width:200px" prop="people">
										<el-input v-model.number="form.people"></el-input>
									</el-form-item>
								</el-col>
							 <el-col :span="8">
									<el-form-item label="本人排名" style="width:200px" prop="paiming">
										<el-input v-model.number="form.paiming"></el-input>
									</el-form-item>

								</el-col>
							</el-row>

							<el-form-item label="证明材料" style="width: 100%;" >
								
								<el-upload class="upload-demo" drag action=""
									ref="upload" 
									:before-upload="beforeadd"
									:on-preview="handlePreview" 
									:on-remove="handleRemove" 
									:file-list="form.fileList" 
									:auto-upload="false" 
									accept=".pdf,.jpg,.png">
									<i class="el-icon-upload" ></i>
									<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
									<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
								</el-upload>
							</el-form-item>




							<el-form-item label="论文类型" prop="type">
								<el-checkbox-group v-model="form.type">
								<!-- 	<el-checkbox label="科技论文" name="type" ></el-checkbox>
									<el-checkbox label="会议论文" name="type"></el-checkbox>
									<el-checkbox label="教学论文" name="type"></el-checkbox> -->
									<el-checkbox v-for="(item,index) in type"  :key="index" :label="item"   name="type"></el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-form-item label="通讯作者" prop="resource">
								<el-radio-group v-model="form.resource" >
									<el-radio  label="1" >是</el-radio>
									<el-radio  label="2">否</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="备注">
								<el-input type="textarea" v-model="form.desc"></el-input>
							</el-form-item>

                          <!--  提交栏 -->
							<el-form-item>
								<el-button type="primary" @click="onsubmit(),open()" >添加信息</el-button>
<!-- 								<el-button type="primary" @click="submitForm('form'),onsubmit()" >添加信息</el-button> -->
								<el-button>取消</el-button>
							</el-form-item>
						</el-form>
				<!-- </el-col> -->
			</el-row>




		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					form: {
						name: '',
						region: '',
						chubandate: '',
						jibie:'',
						kanwu:'',
						score:'',
						people:'',
						paiming:'',
						resource:'',
						// 是否通讯作者1:		
						type: [],
						fileList: [{
							name: 'food.jpeg',
							url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
						}, {
							name: 'food2.jpeg',
							url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
						}],

						
					},
			        jibie:["省级","县级","其他"],
					type:["教改论文","科技论文","会议论文","科学论文"],
				    rules: {
					          name: [
					            { required: true, message: '请输入填报人', trigger: 'blur' },
					            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
					          ],
					          region: [
					            { required: true, message: '请选择登记表类别', trigger: 'change' }
					          ],
							  jibie:[
								{ required: true, message: '请选择登记表级别', trigger: 'change' }
							  ],
							  kanwu:[
								  
								  { required:true,min: 1,  message: '长度至少1的字符', trigger: 'blur'}
							  ],
							  score:[ 
								 {required:false},
								 {type: 'number', message: '得分必须为数字值', trigger: 'blur'},
								 
										],
							  people:[
								  {required:false},
								  { type: 'number', message: '人数必须为数字值', trigger: 'blur'},
							  ],
							  paiming:[
								  { required:true,type: 'number', message: '排名必须为数字值', trigger: 'blur'},
							  ],
							  
					          chubandate: [
					            { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
					          ],
					      
					          type: [
					            { type: 'array', required: true, message: '请至少选择一个类别', trigger: 'change' }
					          ],
					          resource: [
					            { required: true, message: '是否是通讯作者', trigger: 'change' }
					          ],
					        }

				},
				//生命周期函数
				created() {

				},
				methods: {


					// 绑定提交信息按钮
				onsubmit() {
					//用于获取提交时的时间:yyyy-MM-dd HH:mm:ss
					let currentdate = this.getCurrentTime()
					console.log(currentdate)
					// 出版时间在el-date-picker 中value-format="yyyy-MM-dd"
					console.log(this.form.chubandate)
					//用与提交的数据
					console.log(this.form)
					//证明材料数据可用
					this.submitUpload()
					console.log(this.from.fileList)
					},
					
			    //证明材料函数与证明材料的钩子函数绑定
				beforeadd(file){
					this.form.fileList.push(file)
				},
				submitUpload() {
				  this.$refs.upload.submit();
				},
				// handleRemove(file, fileList) {
				  
				// },
				handlePreview(file) {
				  
				},
				//检验是否提交函数,可在添加信息中取消该函数
				 open() {
				        this.$confirm('是否提交?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.$message({
				            type: 'success',
				            message: '提交成功!'
				          });
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消提交'
				          });          
				        });
				      },
				//检验函数 若不符合则无法提交
		        submitForm(formName) {
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		            alert('submit!');
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        })},


				// 日期函数格式为:yyyy-MM-dd HH:mm:ss	:2022-10-2 20:32:19
			    getCurrentTime() {
					         let currentTime = new Date(), 
							     year = currentTime.getFullYear(),
					             month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1,
					             day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
								 hour=currentTime.getHours()<10?'0'+currentTime.getDate():currentTime.getDate();
								 minutes=currentTime.getMinutes()<10?'0'+currentTime.getMinutes():currentTime.getMinutes();
								 second=currentTime.getSeconds()<10?'0'+currentTime.getMinutes():currentTime.getSeconds();
								 currentTime= year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + second
								 return currentTime
								 
					    },
						 
					
					

				},

			})
		</script>

	</body>


</html>
